<template>
  <a-card title="流程图" :body-style="{ padding: '10px' }">
    <template #extra>
      <a-button size="small" type="primary" @click="generatorImage">生成图片</a-button>
    </template>
    <div ref="lfConitanerRef" style="height: 70vh"></div>
  </a-card>
</template>

<script lang="ts">
  import { computed, defineComponent, nextTick, onMounted, ref, watch } from 'vue'
  import LogicFlow from '@logicflow/core'
  import { Control, Menu, DndPanel, Snapshot, NodeResize } from '@logicflow/extension'
  import '@logicflow/core/dist/style/index.css'
  import '@logicflow/extension/lib/style/index.css'
  import { useLayoutStore } from '@/layouts'
  const data = {
    // 节点
    nodes: [
      {
        id: 1,
        type: 'rect',
        x: 300,
        y: 30,
        text: '开始',
      },
      {
        id: 2,
        type: 'diamond',
        x: 300,
        y: 150,
        text: '判断',
      },
      {
        id: 3,
        type: 'circle',
        x: 300,
        y: 300,
        text: '结束',
      },
    ],
    // 边
    edges: [
      {
        type: 'polyline',
        sourceNodeId: 1,
        targetNodeId: 2,
      },
      {
        type: 'polyline',
        sourceNodeId: 2,
        targetNodeId: 3,
      },
    ],
  }
  export default defineComponent({
    name: 'Flow',
    setup() {
      const lfConitanerRef = ref<HTMLElement | null>(null)
      LogicFlow.use(Control)
      LogicFlow.use(Menu)
      LogicFlow.use(DndPanel)
      LogicFlow.use(Snapshot)
      LogicFlow.use(NodeResize)
      const store = useLayoutStore()
      const lf = ref<LogicFlow>()
      const options = computed(() => {
        return {
          container: lfConitanerRef.value as HTMLElement,
          stopScrollGraph: true,
          stopZoomGraph: true,
          background: {
            color: store.state.theme === 'dark' ? '#18181c' : '#ffffff',
          },
          grid: {
            type: 'dot',
            size: 20,
          },
          style: {
            circle: {
              // 圆形样式
              r: 40,
              fill: '#fff',
              strokeWidth: 2,
            },
          },
        }
      })
      onMounted(() => {
        lf.value = new LogicFlow(options.value)
        lf.value.setPatternItems([
          {
            label: '选区',
            icon: '',
            callback: () => {
              lf.value?.openSelectionSelect()
              lf.value?.once('selection:selected', () => {
                lf.value?.closeSelectionSelect()
              })
            },
          },
          {
            type: 'circle',
            text: '开始',
            label: '开始节点',
            icon: '',
          },
          {
            type: 'rect',
            label: '用户任务',
            icon: '',
            className: 'important-node',
          },
          {
            type: 'rect',
            label: '系统任务',
            icon: '',
            cls: 'import_icon',
          },
          {
            type: 'diamond',
            label: '条件判断',
            icon: '',
          },
          {
            type: 'circle',
            text: '结束',
            label: '结束节点',
            icon: '',
          },
        ])
        lf.value.setTheme({
          rect: {
            // 矩形样式
            width: 100,
            height: 50,
            radius: 6,
            fill: '#fff',
            strokeWidth: 2,
          },
        })
        lf.value.render(data)
      })
      function generatorImage() {
        lf.value?.getSnapshot()
      }
      watch(
        () => options.value,
        (newVal) => {
          nextTick(() => {
            lf.value?.updateEditConfig(newVal)
          })
        }
      )
      return {
        lfConitanerRef,
        generatorImage,
      }
    },
  })
</script>
